<template>
<view class="register-box h100 bg-white text-black">
  <security-code
    event="mobilelogin"
    :hasCaptcha="true"
    mobilePlaceholder="请输入手机号码"
    smsCodeTitle="手机验证码"
    smsCodePlaceholder="请输入验证码"
    @onChange="getSecurityParams">
  </security-code>

  <view class="flex flex-direction align-center margin-top-xl padding">
    <view class="agreement flex align-start">
      <checkbox class='orange' :class="ifAgree ? 'checked' : ''" :checked="ifAgree" value="A" style="transform:scale(0.5)" @tap="agreementChange"></checkbox>
      <view class="text-xs">点击勾选代表您已同意<text class="text-orange" @tap="getProtocol(3)">《租赁服务协议》</text>和<text class="text-orange" @tap="getProtocol(4)">《个人征信授权书》</text></view>
    </view>
    <button class="cu-btn dm-btn round bg-orange text-xl margin-top" @tap="onAction" :disabled="!ifAgree" type="" :loading="ifLoading">注册</button>
  </view>
</view>
</template>

<script>
import securityCode from '@/components/security-code/security-code'

export default {
  name: 'register',
  components: { securityCode },
  data () {
    return {
      mobile: '',
      code: '',
      ifAgree: false,
      ifLoading: false
    }
  },
  computed: {
    loginParams() {
      return {
        mobile: this.mobile,
        code: this.code
      }
    }
  },
  methods: {
    onAction() {
      this.$api.mobileLogin(this.loginParams).then(async res => {
        if (!res) return
        console.log('注册', res)
        const resData = res.data
        const {userinfo} = resData
        this.$store.dispatch('handleLogin', userinfo)
        await this.$showSuccessToast('注册成功')
        this.gotoHomePage()
      })
    },
    getSecurityParams(params) {
      this.mobile = params.mobile
      this.code = params.smsCode
    },
    agreementChange() {
      this.ifAgree = !this.ifAgree
    },
    getProtocol(type) {
      const params = {
        scenetype: type
      }
      this.$api.getProtocol(params).then(res => {
        console.log('获取协议', res)
        const { url } = res.data
        const pageParams = {
          mode: 'protocol',
          type,
          url
        }
        this.gotoWebPage(pageParams)
      })
    },
    gotoHomePage() {
      this.$Router.pushTab({ name: 'home' })
    },
    gotoWebPage(params) {
      this.$Router.push({
        name: 'webView',
        params
      })
    }
  }
}
</script>

<style lang="less">
.register-box {
  .agreement {
    width: 80%;
  }

  .dm-btn {
    width: 100%;
  }
}
</style>
